import "./index.css";
import { useStore } from "../store";
import { useState } from "react";
function Task() {
  const { taskStore } = useStore();
  const [todo,setTodo] = useState("");

  const onEnter = () => {
    return null;
  };
  
  useEffect(() => {
    //
  
    return () => {
      //
      rent
    }
  }, [])
  

  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          autoFocus
          autoComplete="off"
          placeholder="What needs to be done?"
        />
      </header>
      <section className="main">
        <input id="toggle-all" className="toggle-all" type="checkbox" />
        <label htmlFor="toggle-all"></label>
        <ul className="todo-list">
          {taskStore.list.map((data) => {
            return (
              <li className={"todo " + data.isDone && "completed"}>
                <div className="view">
                  <input className="toggle" type="checkbox" />
                  <label>{data.name}</label>
                  <button className="destroy"></button>
                </div>
              </li>
            );
          })}
        </ul>
      </section>
    </section>
  );
}

export default Task;
